<!DOCTYPE html>
<html>

<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/validform.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/js/jquery-treegrid-master/jquery.treegrid.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">   
</head>
<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                        <i class="fa fa-bars icon"></i>
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="elm-wrap">
                                    <div class="alert alert-info" role="alert">右侧预览视图可以直接预览应急处置流程</div>
                                </div>
                                <div class="elm-wrap emrgencylist">
                                    <div class="row">
                                        <!-- 左侧列表 -->
                                        <div class="col-sm-4">
                                            <div class="elm-card" v-for="(elm,index) in list" @click="showRight(elm)" :class={active:elm.emergency_id==accElm.id}>
                                                <div class="row">
                                                    <div class="col-sm-8">
                                                        <p class="title">{{elm.emergency_name}}</p>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <div class="btngroup" style="min-width:69px"><a href="" @click.prevent.stop="editing(elm)">编辑</a> | <a href="" @click.prevent="deling(elm)">删除</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="elm-card elm-card-add" @click="editing()">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <p class="title">+</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 右侧数据 -->
                                        <div class="col-sm-8">
                                            <!-- 事件基本数据 -->
                                            <div class="form-horizontal main_form">
                                                <div class="form-group">
                                                    <label for="inputName" class="col-sm-2 control-label">事件名称：</label>
                                                    <div class="col-sm-6">
                                                        <input type="text" name="rolename" class="form-control" id="inputName" placeholder="请输入事件名称" :readonly="!editable" v-model="accElm.name" datatype="*" errormsg="名称错误" nullmsg="名称不能为空">
                                                        <span class='Validform_checktip' />
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <p v-show="!validate.name" class="form-control-static font-alert"> {{validate.validNameTxt}}</p>
                                                    </div> 
                                                </div>
                                                <div class="form-group">
                                                    <label for="inputName" class="col-sm-2 control-label">事件等级：</label>
                                                    <div class="col-sm-6">
                                                        <select name="" class="form-control" :readonly="!editable" :disabled="!editable" v-model="accElm.levelid">
                                                            <option value="1">一级事件</option>
                                                            <option value="2">二级事件</option>
                                                            <option value="3">三级事件</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="taskdesc" class="col-sm-2 control-label">注意事项： </label>
                                                    <div class="col-sm-6">
                                                        <textarea name="taskdesc" rows="3" class="form-control taskdesc" v-model="accElm.desc" :readonly="!editable" datatype="*" errormsg="注意事项错误" nullmsg="注意事项不能为空"></textarea>
                                                        <span class='Validform_checktip' />
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 当前步骤 -->
                                            <div class="elm-wrap" v-for="(info,index) in accElm.details" style="position:relative" :key="info.ids">
                                                <p v-if="editable" @click="removeNewQuan(index)" class="delaccbtn">&times;</p>
                                                <div class="elm-card">
                                                    <p class="title elm-title">步骤{{index+1}}</p>
                                                    <div class="row elm-body">
                                                        <div class="col-sm-11 form-horizontal ss_form">
                                                            <div class="form-group">
                                                                <label for="etype" class="col-sm-2 control-label">接收对象： </label>
                                                                <div class="col-sm-10">
                                                                    <div class="radio3 radio-check radio-blue radio-inline">
                                                                        <input type="radio" :id="'radio1'+info.ids" v-model="info.type" :name="'etype'+info.ids" value="2" :disabled="!editable" :readonly="!editable">
                                                                        <label :for="'radio1'+info.ids">
                                                                            岗位
                                                                        </label>
                                                                    </div>
                                                                    <div class="radio3 radio-check radio-blue radio-inline">
                                                                        <input type="radio" :id="'radio2'+info.ids" v-model="info.type" :name="'etype'+info.ids" value="1" :disabled="!editable" :readonly="!editable">
                                                                        <label :for="'radio2'+info.ids">
                                                                            人员
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group" v-show="info.type != 2">
                                                                <label for="user_name" class="col-sm-2 control-label">选择人员： </label>
                                                                <div class="col-sm-10">
                                                                    <input :id="'userid'+info.ids" name="userid" type="hidden" />
                                                                    <div class="departSelect">
                                                                        <div type="text" class="form-control tagselect" :id="'user'+info.ids" :class="'treegroup'+info.ids"></div>
                                                                        <!-- <div class="form-control" id="treegroup"></div> -->
                                                                        <div :id="'groudtree'+info.ids" class="groudtree"></div>    
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group" v-show="info.type == 2">
                                                                <label for="user_name" class="col-sm-2 control-label">选择岗位：</label>
                                                                <div class="col-sm-10">
                                                                    <select class="form-control post" :class="'post'+info.ids" placeholder="选择岗位" style="width:100%" ></select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="edesc" class="col-sm-2 control-label">注意事项： </label>
                                                                <div class="col-sm-10">
                                                                    <textarea name="edesc" rows="3" class="form-control edesc" v-model="info.desc" :readonly="!editable"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="elm-wrap" v-if="editable">
                                                <div class="elm-card elm-card-add" @click="addStep()">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <p class="title">+</p>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </div>
                                            <p v-if="!validate.rights" class="form-control-static font-alert">{{validate.info}}</p>
                                            <div class="elm-wrap form-group" v-if="editable">
                                                <button type="button" @click.prevent="subData" class="btn btn-sm btn-info">确认</button>
                                                <button type="button" @click.prevent="cancelEdit" class="btn btn-sm btn-default">取消</button>
                                            </div>
                                             
                                        </div>
                                    </div>
                                     
                                </div> 
                            </div>
                             
                        </div>   
                    </div>
                </div>
            </div>
        </div>
        <footer class="app-footer">
            <div class="wrapper"></div>
        </footer>
        <div class="modal fade" id="modalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除</h4>
                    </div>
                    <div class="modal-body">
                        确定删除么？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info deling">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Javascript Libs -->
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/common/base.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/validform.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
<script type="text/javascript" src="../lib/js/ztreeJs.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
<script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
<script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
<!-- Javascript -->
<script type="text/javascript" src="../lib/js/common/app.js"></script>
<script>
    
    
    navData.accNav1 = 'emergency'
    navData.nav1Name = '应急处置管理'
    navData.accNav2 = 'emergency'
    navData.accNav3 = '14'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    var Info={}
    var vm = new Vue({
        el:'.emrgencylist',
        data:{
            count:0,
            list:[],//应急列表
            accElm:{
                id:'',
                name:'',
                levelid:"",
                desc:'',
                details:[{
                    step:"1",
                    type:"1",
                    name:"张三,李四,王二麻子",
                    id:"1,2,3",
                    desc:"操作内容"
                }]
            },
            editType:2,//1编辑 2新增
            editable:false,
            validate:{
                name:true,
                rights:true,
                info:''
            }

        },
        beforeCreate:function(){
            var that=this
            //流程列表
            $.ajax({
                url:serverUrl.base+serverUrl.emergency+'info',
                type:"post",
                data:{
                    _:Math.random()
                },
                dataType:"json",
                success:function(res){
                    if(res.code == '0' && res.data.length != 0){
                        that.list=res.data
                        if(that.accElm.id ==  '' || that.accElm.id ==  undefined){
                            that.showRight(res.data[0])
                        }else if(that.editType == 2 && res.data.length != 0){
                            that.showRight(that.list[that.list.length-1])
                        }
                        
                    }
                    
                },
                complete:function(res){
                    $('body').loading('close')                 
                }
            })
        },
        computed:{},
        methods:{
            editing:function(elm){
                this.validate.info='应急处置中每个步骤的 “人员/岗位” 和 “注意事项” 均是必填项！'
                this.count ++
                if(elm){
                    this.editType = 1
                    this.showRight(elm)
                }else{
                    this.editType = 2
                    var _ndata={
                        ids:'x'+this.count,
                        step:"1",
                        type:"1",
                        name:"",
                        id:"",
                        desc:""
                    }
                    this.accElm={
                        id:'',
                        name:'',
                        levelid:"1",
                        desc:'',
                        details:[_ndata]
                    }
                    newSelect(_ndata,true)
                }
                this.editable = true
            },
            deling:function(elm){
                this.editable = false;
                delingModal('emergency',elm)
            },
            addStep:function(elm){
                if(this.editable){
                    this.count ++
                    var _ndata = {
                        ids:'x'+this.count,
                        step:"1",
                        type:"1",
                        name:"",
                        id:"",
                        desc:""
                    }
                    this.accElm.details.push(_ndata)
                        newSelect(_ndata,this.editable)
                }
            },
            showRight:function(elm){
                //点击事件时候呈现作业任务
                var that = this;                
                $.ajax({
                    url:serverUrl.base+serverUrl.emergency+'datalist',
                    type:"post",
                    data:{id:elm.emergency_id},
                    dataType:"json",
                    success:function(res){
                        if(res.code == '0'){
                            that.accElm=res.data
                            if(that.accElm.length != 0){
                                for(var i=0;i<that.accElm.details.length;i++){
                                    newSelect(that.accElm.details[i],that.editable)
                                }
                            }
                        }
                    },
                    complete:function(res){
                                                
                    }
                })
                this.editable = false
                
            },
            subData:function(){
                if(!myValidform2.check()){
                    return false
                }
                var _upData = this.accElm,_details = _upData.details;
                // var _upData = {
                //     id:'',
                //     name:_upVueData.name,
                //     levelid:_upVueData.levelid,
                //     desc:_upVueData.desc,
                //     details:[{
                //         step:"1",
                //         type:"1",
                //         id:"1,2,3",
                //         desc:"操作内容"
                //     }]
                // }
                this.validate.rights = true
                if(_details.length != 0 ){
                    
                    for(var i=0;i<_details.length;i++){
                        if(_details[i].type == '1'){
                            _details[i].id = $('#userid'+_details[i].ids).val()
                        }else{
                            if($('.post'+_details[i].ids).val() == null){
                                this.validate.rights = false
                                return false
                            }
                            _details[i].id = $('.post'+_details[i].ids).val().join(',')
                        }
                        if(_details[i].id == '' || _details[i].desc == ''){
                            this.validate.rights = false
                            return false
                        }
                        if(this.editType == 2 || String(_details[i].ids).substring(0,1) == 'x'){
                            _details[i].ids=''
                        }
                        _details[i].name=undefined
                    }
                }else{
                    this.validate.rights = false
                    this.validate.info='该应急处置至少要有一个步骤'
                }
                var that = this
                if(this.validate.rights){
                    var upData = _upData
                    var _url = serverUrl.base+serverUrl.emergency+'add'
                    if(that.editType == 1){
                        _url = serverUrl.base+serverUrl.emergency+'update'
                    }
                    $('body').loading('open')
                    $.ajax({
                        url:_url,
                        type:"post",
                        data:upData,
                        dataType:"json",
                        success:function(res){
                            if(res.code == '0'){
                                leftInit()
                                that.editable = false
                                $("#modalTips").find('.modal-title').text('成功') 
                                var _txt = '应急处置修改成功！'
                                if(that.editType == '2'){
                                    _txt = '应急处置添加成功！'
                                }
                                $("#modalTips").find('.modal-body').text(_txt)
                            }else{
                                $("#modalTips").find('.modal-title').text('出现问题') 
                                $("#modalTips").find('.modal-body').text(res.info)
                            }
                            setTimeout(function(){
                                $("#modalTips").modal()    
                            },500)
                        },
                        complete:function(res){
                            $('body').loading('close') 
                        },
                        error:function(res){
                            $("#modalTips").find('.modal-title').text('出现问题') 
                            $("#modalTips").find('.modal-body').text(res.info)
                            setTimeout(function(){
                                $("#modalTips").modal()    
                            },500)
                        }
                    })
                }else{
                    return false;
                }
                
            },
            cancelEdit:function(){
                this.showRight({emergency_id:this.accElm.id})
            },
            removeNewQuan:function(ids){
                var _that=this
                var _ids = this.accElm.details[ids].ids
                console.log(String(_ids).substring(0,1))
                if((this.editType == 1 && this.editable) && String(_ids).substring(0,1) != 'x'){
                    
                    $.post(serverUrl.base+serverUrl.emergency+'delsep',{ids:_ids},function(res){
                        if(res.code == '0'){
                            _that.accElm.details.splice(ids,1)
                        }else{
                            alert('失败：'+ res.info)
                        }
                    },'json').error(function(res){
                        alert('错误：'+res.info)
                    })
                }else{
                    this.accElm.details.splice(ids,1)
                }
                
            }
        },
        watch:{
            'accElm.details':function(val){
            },
            'editable':function(val){
                if(!val){
                    // for(var i=0;i<this.accElm.details.length;i++){
                    //     $('.treegroup'+this.accElm.details[i].ids).addClass('disabled')
                    //     //$(document).off('click','.treegroup'+this.accElm.details[i].ids); 
                    // }
                    $('.tagselect').addClass('disabled')
                    $('.post').prop("disabled", true) 
                }
            }
        },
        directives: {
            focus: function(el, binding) {
                if (binding.value) {
                    el.focus()
                }
            }
        }

    })
    //删除
    function delingModal(name,elm){
        var _text={
            tit:'删除',
            body1:'确定删除吗？',
            body2:'删除出现问题',
            btn1:'确定',
            cbtn1:'取消',
            cbtn2:'知道了',
            deltit1:'删除成功',
            deltit2:'删除失败',
            delbody1:"删除成功！",
            delbody2:"出现问题",
        },_datas={
            id:'',
            data:{},
            url:''
        }
        switch(name){
            case 'emergency':
                if(arguments[1]){
                    _datas.data={
                        id:elm.emergency_id
                    }
                    _text.body1 = '确定删除该应急处置事件么？'
                }

                _datas.url = serverUrl.base+serverUrl.emergency+'del'
                _text.tit = '删除应急处置'
                $('#modalDel').find('.modal-title').text(_text.tit)
                $('#modalDel').find('.modal-body').text(_text.body1)
                $('#modalDel').modal()
            break;
            default:
            break;
        }
        $('.deling').off('click').on('click',function(){
            $.post(_datas.url,_datas.data,function(res){
                $('#modalDel').modal('hide')
                if(res.code == 0){
                    vm.accElm.id= 'del'
                    leftInit()
                }else{
                    _text.deltit1 = _text.deltit2
                    _text.delbody1 = res.info
                }
                setTimeout(function(){
                    $('#modalTips').find('.modal-title').text(_text.deltit1)
                    $('#modalTips').find('.modal-body').text(_text.delbody1)
                    $("#modalTips").modal()   
                     
                },500)
            },'json').error(function(res){
                _text.delbody2 = res.info
                $('#modalDel').modal('hide')
                setTimeout(function(){
                    $('#modalTips').find('.modal-body').text(_text.delbody2)
                    $("#modalTips").modal()    
                },500)
            }).complete(function(){
                $('#modalDel').modal('hide')
            })
        })
        
    }
    function leftInit(elm){
        $.ajax({
            url:serverUrl.base+serverUrl.emergency+'info',
            type:"post",
            data:{_:Math.random()},
            dataType:"json",
            success:function(res){
                vm.list=res.data
                if(vm.list.length !=0){
                    if(vm.accElm.id == ''){
                        vm.showRight(res.data[vm.list.length-1])
                        
                    }else if(vm.accElm.id == 'del'){
                        vm.showRight(res.data[0])
                    }else{
                        vm.showRight({emergency_id:vm.accElm.id}) 
                    }
                }
                
            },
            complete:function(res){
                                        
            }
        })
    }
    var myValidform = $(".ss_form").Validform({
                tiptype:3
            });  
    var myValidform2 = $(".main_form").Validform({
                tiptype:3
            });  
    function newSelect(data,editable){
        var ids=data.ids,initData = data.id
        setTimeout(function(){   
            if(!editable){
                $('.treegroup'+ids).addClass('disabled')
            } else{
                $('.treegroup'+ids).removeClass('disabled')
            }
            $(document).off('click','.treegroup'+ids).on('click','.treegroup'+ids,function(){
                if($(this).hasClass('disabled')){
                    return false
                }
                showsDeptWin('user'+ids,'userid'+ids,"1",false);
            })  
            if(data.type == '1' && data.id != ''){
                var _user_info=[],_id = data.id.split(','),_name=data.name.split(',')
                for(var i=0;i<_id.length;i++){
                    _user_info.push({name:_name[i],id:_id[i]})
                }
                tagSelected({data:_user_info,elmName:'user'+ids,dataName:'userid'+ids,init:true}) 
            }
               
            // myValidform = $(".ss_form").Validform({
            //     tiptype:3
            // }); 
        },0)
        // myValidform = $(".ss_form").Validform({
        //         tiptype:3
        //     });  
        var select = new rpSelect({
            sel:'post'+ids,
            data:{post_type_id:'2'},
            // valide:myValidform,
            url:serverUrl.base + serverUrl.post + 'post_list',
            placeholder:'请选择岗位',
            calfn:function(){
                if(data.type != '1'){
                    if(initData && initData != ""){
                        $('.post'+ids).val(initData.split(',')).trigger('change')
                    }
                    if(!editable){
                        $('.post'+ids).prop("disabled", true)
                    }else{
                        $('.post'+ids).prop("disabled", false)
                    }
                }
                
            }
        })
        
    }
</script>
</body>

</html>
